@(customer: Customer)

@***
 * http://www.playframework.com/documentation/2.2.2/ScalaJavascriptRouting
 ***@ 

@scripts = {

  <script type="text/javascript" charset="utf-8">
    $(function () {

      fetchChartData("E");

      $(".commodity").change(function(){
        var value = this.getAttribute("value");
          
        if(value == 'electricity') {
          fetchChartData("E");
        } else if(value == 'gas') {
          fetchChartData("G");
        } else {
          alert("Error!");    
        }
          
      });
      
      $("input[name='commodity']").change(function() {
        var value = this.getAttribute("value");
        
        if(value == 'electricity') {
           fetchChartData("E");
        } else if(value == 'gas') {
          fetchChartData("G");
        } 
        
      });
      
    });
   
    function fetchChartData(commodity) {
      $.ajax(jsRoutes.controllers.EnergyUsages.fetch(@customer.id, commodity))
        .done( function( data ) {
          var options = {
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
               text: 'Energy Consumption'
             },
             yAxis: {
               title: {
               text: 'Consumption and Cost'
               }
            },
            tooltip: {
                shared: false,
                formatter: function() {
                    var text = '';
                    if(this.series.name == 'Cost') {
                      text = this.x + '<br>' + this.series.name +
                        ': £' + Highcharts.numberFormat(this.y, 2);
                    } else {
                      text = this.x + '<br>' + this.series.name +
                        ': ' + Highcharts.numberFormat(this.y, 0) + 'kW';
                    }
                    return text;
                }
            },
            series: [{}],
            xAxis: {
                categories: []
            }
          };
          options.series = data.series;
          options.xAxis.categories = data.categories;
          var chart = new Highcharts.Chart(options);
        })
        .fail( function( data ) {
          alert( "Data failed: " + data );
        });
    }
  </script>
}  

@main(Some(customer), scripts) {
  
  @customerBanner(customer)

  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default active">
      <input type="radio" name="commodity" id="elecRadio" value="electricity" checked>
        Electricity
    </label>
    <label class="btn btn-default">
      <input type="radio" name="commodity" id="gasRadio" value="gas">
        Gas
    </label>
  </div>

  <div id="container" style="width:100%; height:400px"></div>

}
